import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import "package:flutter/material.dart";
import "package:hinge/common/index.dart";
import "package:hinge/store/root_store.dart";
import "package:go_router/go_router.dart";

// 卡片裁剪器
class CardClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final radius = 10.0; // 圆角半径
    final path = Path();

    // 左上角圆角
    path.moveTo(0, radius);
    path.quadraticBezierTo(0, 0, radius, 0);

    // 上边缘到右上角前
    path.lineTo(size.width - 130, 0);

    // 右上角圆角区域
    path.quadraticBezierTo(size.width - 120, 0, size.width - 110, 30);
    path.lineTo(size.width - 10, 30);
    path.quadraticBezierTo(size.width, 30, size.width, 40);

    // 右边缘
    path.lineTo(size.width, size.height - radius);

    // 右下角圆角
    path.quadraticBezierTo(
      size.width,
      size.height,
      size.width - radius,
      size.height,
    );

    // 底边缘
    path.lineTo(radius, size.height);

    // 左下角圆角
    path.quadraticBezierTo(0, size.height, 0, size.height - radius);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class EncyclopediaPage extends StatefulWidget {
  const EncyclopediaPage({super.key});

  @override
  State<EncyclopediaPage> createState() => _EncyclopediaPageState();
}

class _EncyclopediaPageState extends State<EncyclopediaPage> {
  final _rootStore = RootStore();
  final TextEditingController _searchController = TextEditingController();
  List<VideoModel> _videos = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    setState(() => _isLoading = true);

    // 从 SP 中获取视频列表
    setState(() {
      _videos = VideoService.getVideoList();
      _isLoading = false;
    });
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFFA794FD), Color(0xFFFFEFFA)],
          ),
        ),
        child: SafeArea(
          bottom: false,
          child: Column(
            children: [
              // 标题
              Padding(
                padding: EdgeInsets.only(
                  left: 20.w,
                  right: 20.w,
                  top: 10.h,
                  bottom: 20.h,
                ),
                child: Text(
                  'Perfume Encyclopedia',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ).alignLeft(),

              // 搜索框
              GestureDetector(
                onTap: () {
                  // 点击整个搜索框时跳转到AI聊天页面
                  context.push('/ai_chat', extra: _searchController.text);
                },
                child: Hero(
                  tag: 'search_input',
                  child: Container(
                    height: 52.h,
                    margin: EdgeInsets.symmetric(horizontal: 20.w),
                    decoration: BoxDecoration(
                      color: Color(0xFFA393E3),
                      borderRadius: BorderRadius.circular(25.r),
                      border: Border.all(color: Colors.white, width: 2),
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xFFA393E3),
                          blurRadius: 10,
                          offset: Offset(0, 2),
                        ),
                      ],
                    ),
                    child: Center(
                      child: TextField(
                        controller: _searchController,
                        enabled: false, // 禁用文本输入，只作为UI显示
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w400,
                          fontFamily: 'Inter',
                        ),
                        textAlignVertical: TextAlignVertical.center,
                        decoration: InputDecoration(
                          isCollapsed: true,
                          hintText: 'Search perfume related',
                          hintStyle: TextStyle(
                            color: Colors.white,
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w400,
                            fontFamily: 'Inter',
                          ),
                          prefixIcon: null,
                          suffixIcon: Container(
                            padding: EdgeInsets.all(12.w),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.search,
                                  color: Colors.white,
                                  size: 24.w,
                                ),
                              ],
                            ),
                          ),
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(
                            horizontal: 16.w,
                            vertical: 14.h,
                          ),
                          fillColor: Colors.transparent,
                          filled: true,
                        ),
                      ),
                    ),
                  ),
                ),
              ),

              SizedBox(height: 20.h),

              // 视频列表
              Expanded(
                child:
                    _isLoading
                        ? Center(
                          child: CircularProgressIndicator(color: Colors.white),
                        )
                        : ListView.builder(
                          padding: EdgeInsets.only(
                            left: 20.w,
                            right: 20.w,
                            bottom: 120.h,
                          ),
                          itemCount: _videos.length,
                          itemBuilder: (context, index) {
                            final video = _videos[index];
                            return _buildVideoCard(video);
                          },
                        ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildVideoCard(VideoModel video) {
    return GestureDetector(
      onTap: () {
        // 跳转到视频详情页
        context.push('/video_detail/${video.id}');
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 20.h),
        height: 258.h,
        child: Stack(
          children: [
            // Learn 标签
            Positioned(
              top: 6,
              right: 0,
              child: Container(
                width: 135.w,
                height: 36.h,
                decoration: BoxDecoration(
                  color: Color(0xFFF4E7FF),
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(10.r),
                  ),
                ),
                alignment: Alignment.center,
                child: Padding(
                  padding: EdgeInsets.only(bottom: 8.h),
                  child: Text(
                    'learn',
                    style: TextStyle(
                      color: Color(0xFF2D0C57),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5,
                    ),
                  ),
                ),
              ),
            ),

            // 裁剪后的视频封面容器
            ClipPath(
              clipper: CardClipper(),
              child: Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.05),
                      blurRadius: 15,
                      offset: Offset(0, 5),
                    ),
                  ],
                ),
                child: Image.asset(
                  video.coverUrl,
                  width: double.infinity,
                  height: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
            ),

            // 渐变遮罩层
            ClipPath(
              clipper: CardClipper(),
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.transparent, Colors.black.withOpacity(0.6)],
                    stops: [0.6, 1.0],
                  ),
                ),
              ),
            ),

            // 播放按钮
            Center(
              child: Icon(
                IconFont.play,
                color: Colors.white.withOpacity(0.8),
                size: 36.w,
              ),
            ),

            // 视频描述
            Positioned(
              left: 16.w,
              right: 16.w,
              bottom: 16.h,
              child: Text(
                video.description,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontFamily: 'Inter',
                  fontWeight: FontWeight.w400,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
